<template>
	<template v-for="item in tableData" :key="item.title">
		<a-typography-paragraph strong>
			<blockquote>
				{{ item.title }}
			</blockquote>
		</a-typography-paragraph>
		<vxe-table :data="item.bills" v-bind="billTableOption" class="bill-preview-table">
			<vxe-column field="billDate" title="账单日期" min-width="120" align="center" />
			<vxe-column title="账单周期" min-width="260" align="center">
				<template #default="{row}">{{ row.beginDate }}至{{ row.endDate }}</template>
			</vxe-column>
			<vxe-column field="totalAmount" title="金额" min-width="100" align="right">
				<template #default="{row}">{{ row.totalAmount.toLocaleString() }}</template>
			</vxe-column>
			<vxe-column title="操作" width="100" align="center">
				<template #default="{row}">
					<a>-</a>
				</template>
			</vxe-column>
		</vxe-table>
	</template>
	<template v-if="!tableData.length">暂无数据</template>
</template>

<script lang="ts" setup>
	import {
		change,
		insertEnterContract,
		renewalF,
		renterContractPreview,
		cal_merge_view,
		resubmitF,
		supplementaryAgreementF,
		childerResubmit
	} from '@/api/contract'
	import {reactive, ref, watch} from 'vue'
	import {VxeTableProps} from 'vxe-table'
	const props = defineProps<{
		params: object
		loading: boolean
	}>()

	const emit = defineEmits(['update:loading'])
	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		}
	})
	const loading = ref(true)
	const tableData = ref([{}])
	const fetchData = async () => {
		// fetch
		try {
			loading.value = true
			emit('update:loading', true)
			// const res = await cal_merge_view(props.params)
			// const {taskId} = res

			const {data} = await cal_merge_view(props.params).finally(() => {
				loading.value = false
				emit('update:loading', false)
			})

			tableData.value = data
		} catch (error) {
			loading.value = false
			emit('update:loading', false)
		}
	}
	watch(
		() => props.params,
		val => {
			if (val) {
				console.log(111)

				fetchData()
			}
		},
		{immediate: true}
	)
	defineExpose({})
</script>
